<template>
  <a-form
    @submit="handleSubmit"
    :form="form"
    :labelCol="labelCol"
    :wrapperCol="wrapperCol"
  >
    <a-form-item style="display: none">
      <a-input v-decorator="['id',decoratorOptions.id]" />
    </a-form-item>
    <a-form-item label="角色">
      <a-input
        v-decorator="['name', decoratorOptions.name]"
        placeholder="角色"
      />
    </a-form-item>
    <a-form-item label="是否默认角色">
      <a-radio-group v-decorator="['defaultRole', decoratorOptions.defaultRole]">
        <a-radio :value="true">是</a-radio>
        <a-radio :value="false">否</a-radio>
      </a-radio-group>
    </a-form-item>

    <a-form-item label="是否前台显示">
      <a-radio-group v-decorator="['showAlways', decoratorOptions.showAlways]">
        <a-radio :value="1">是</a-radio>
        <a-radio :value="0">否</a-radio>
      </a-radio-group>
    </a-form-item>
    <a-form-item label="备注">
      <a-input
        v-decorator="['description', decoratorOptions.description]"
        placeholder="备注"
      />
    </a-form-item>

    <a-form-item :wrapperCol="{ offset: 7 }">
      <a-button htmlType="submit" type="primary" :loading="submitLoading"
        >提交</a-button
      >
      <a-button style="margin-left: 8px" @click="backToPage(false)"
        >取消</a-button
      >
    </a-form-item>
  </a-form>
</template>

<script>
import formMinxins from "./formMinxins"
import md5 from "js-md5";
const defaultValue = {
  defaultRole: false,
  showAlways: 1,
};

export default {
  name: "FormPage",
  mixins:[formMinxins],
  data() {
    return {
      decoratorOptions: {
        name: {
          rules: [{ required: true, message: "请输入角色名!" }],
        },
        defaultRole: {
          initialValue: defaultValue.defaultRole,
        },
        showAlways: {
          initialValue: defaultValue.showAlways,
        },
        id: {
          initialValue:""
        }
      },
    };
  },
  methods: {
    // 返回
    backToPage() {
      this.form = this.$form.createForm(this);
      this.$emit("backToPage");
    },
    // 提交
    handleSubmit(e) {
      // 阻止 submit 事件的默认行为
      e && e.preventDefault();
      // 表单校验，成功则进行提交
      this.form.validateFields((err, values) => {
        if (!err) {
          this.submitLoading = true;
          // 请求编辑/新增接口
          this.$http("/rapid/role/addAndEdit", { ...values }).then((res) => {
            this.submitLoading = false;
            if (res.code === 200) {
              this.backToPage();
            } else {
              this.$message.error(String(res.message));
            }
          });
        }
      });
    },
  },
};
</script>
